<template>
  <el-main>
    <el-row :gutter="15">
      <el-col :lg="6">
        <el-card
          shadow="never"
          header="处理逻辑说明"
        >
          <el-timeline>
            <el-timeline-item timestamp="两者数据并无顺序要求,只是获取表单值时需要自行设置loading">
              1.远程获取表单配置参数和表单的值
            </el-timeline-item>
            <el-timeline-item timestamp="构建form对象, 循环渲染对应组件, 获取远程选项数据. 完成前组件将由骨架代替">
              2.根据配置构建表单组件
            </el-timeline-item>
            <el-timeline-item timestamp="合并form对象和表单值">
              3.给表单赋值
            </el-timeline-item>
          </el-timeline>
          <el-alert
            title="当前版本为预览版本,并未在正式项目中实施,请谨慎使用. 更多配置以及图形化编辑器正在路上."
            type="warning"
            show-icon
          />
        </el-card>
        <el-card
          shadow="never"
          header="双向绑定"
        >
          <el-button
            type="primary"
            @click="setName"
          >
            改变输入框的值
          </el-button>
          <el-button
            type="primary"
            @click="setConfig"
          >
            改变指定栅格配置
          </el-button>
        </el-card>
      </el-col>
      <el-col :lg="12">
        <el-card
          shadow="never"
          header="动态表单渲染器"
        >
          <sc-form
            ref="formref"
            v-model="form"
            :config="config"
            :loading="loading"
          >
            <el-button
              type="primary"
              @click="save"
            >
              保 存
            </el-button>
            <el-button @click="reset">
              重 置
            </el-button>
          </sc-form>
        </el-card>
      </el-col>
      <el-col :lg="6">
        <el-card
          shadow="never"
          header="表单输出"
        >
          <pre>{{ form }}</pre>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: 'FormRender',
  data() {
    return {
      loading: false,
      config: {},
      form: {}
    }
  },
  mounted() {
    //模拟请求延迟, 配置参数和form值并无顺序要求，可同时请求
    const config = {
      labelWidth: '130px',
      labelPosition: 'right',
      size: 'medium',
      formItems: [
        {
          label: "ElementPlus",
          component: "title",
        },
        {
          label: "输入框",
          name: "name",
          value: "",
          component: "input",
          options: {
            maxlength: "20",
            placeholder: "Activity name",
          },
          rules: [
            {required: true, message: "Please input Activity name", trigger: "blur"}
          ],
          requiredHandle: "$.required==true",
        },
        {
          label: "栅格(12/24)",
          name: "name2",
          value: "",
          component: "input",
          span: 12,
          options: {
            placeholder: "span: 12",
          }
        },
        {
          label: "栅格(12/24)",
          name: "name3",
          value: "",
          component: "input",
          span: 12,
          options: {
            placeholder: "span: 12",
          }
        },
        {
          label: "选择器(多选)",
          name: "select",
          value: "",
          component: "select",
          span: 24,
          options: {
            remote: {
              api: `${this.$CONFIG.API_URL}/system/dic/get`,
              data: {name: 'a'}
            },
            multiple: true,
            items:[
              {
                label: "选项1",
                value: "1"
              },
              {
                label: "选项2",
                value: "2"
              }
            ]
          },
          rules: [
            {required: true, message: "Please input Activity name", trigger: "change"}
          ],
          requiredHandle: "$.required==true",
        },
        {
          label: "选择器(单选)",
          name: "select2",
          value: "",
          component: "select",
          span: 24,
          options: {
            remote: {
              api: `${this.$CONFIG.API_URL}/system/dic/get`,
              data: {name: 'b'}
            },
            items:[
              {
                label: "选项1",
                value: "1"
              },
              {
                label: "选项2",
                value: "2"
              }
            ]
          }
        },
        {
          label: "级联选择器",
          name: "cascader",
          value: "",
          component: "cascader",
          span: 24,
          options: {
            items:[
              {
                label: "Guide",
                value: "guide",
                children: [
                  {
                    label: "Disciplines",
                    value: "disciplines"
                  },
                  {
                    label: "Consistency",
                    value: "consistency"
                  },
                ]
              },
              {
                label: "Resource",
                value: "resource",
                children: [
                  {
                    label: "Axure Components",
                    value: "axure"
                  },
                  {
                    label: "Sketch Templates",
                    value: "sketch"
                  },
                  {
                    label: "Design Documentation",
                    value: "docs"
                  }
                ]
              },
              {
                label: "Component",
                value: "component"
              },
            ]
          }
        },
        {
          label: "多选框",
          name: "checkbox",
          component: "checkbox",
          span: 24,
          tips: "多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",
          options: {
            items:[
              {
                label: "选项1",
                name: "option1",
                value: false
              },
              {
                label: "选项2",
                name: "option2",
                value: false
              }
            ]
          },
          hideHandle: "$.required==true"
        },
        {
          label: "多选框组",
          name: "checkboxGroup",
          value: [],
          component: "checkboxGroup",
          span: 24,
          options: {
            items:[
              {
                label: "选项1",
                value: "option1"
              },
              {
                label: "选项2",
                value: "option2"
              }
            ]
          },
          hideHandle: "$.required==true"
        },
        {
          label: "单选",
          name: "radio",
          value: "1",
          component: "radio",
          options: {
            items:[
              {
                label: "选项1",
                value: "1"
              },
              {
                label: "选项2",
                value: "2"
              }
            ]
          },
          hideHandle: "$.required==true"
        },
        {
          label: "开关",
          name: "required",
          message: "演示如何使用表达式动态显隐和必填，试试打开和关闭开关",
          value: false,
          component: "switch",
        },
        {
          label: "日期/时间",
          name: "date",
          value: "",
          component: "date",
          options: {
            type: "datetime",
            valueFormat: "YYYY-MM-DD HH:mm:ss",
          },
          rules: [
            {required: true, message: "Please input Data", trigger: "change"}
          ],
        },
        {
          label: "滑块",
          name: "slider",
          value: 0,
          component: "slider",
          options: {
            marks: {
              0: '0°C',
              8: '8°C',
              37: '37°C'
            }
          }
        },
        {
          label: "数值",
          name: "number",
          value: 0,
          component: "number",
        },
        {
          label: "颜色",
          name: "color",
          value: "",
          component: "color",
        },
        {
          label: "评分",
          name: "rate",
          value: 0,
          component: "rate",
        },
        {
          label: "SCUI扩展",
          component: "title",
        },
        {
          label: "表格选择器",
          name: "tableselect",
          value: {},
          component: "tableselect",
          span: 24,
          options: {
            apiObj: '$API.demo.page',
            column: [
              {
                label: "ID",
                prop: "id",
                width:150
              },
              {
                label: "姓名",
                prop: "user"
              }
            ],
            props: {
              label: 'user',
              value: 'id',
              keyword: "keyword"
            }
          }
        },
        {
          label: "上传",
          component: "upload",
          options: {
            items:[
              {
                label: "图像1",
                name: "img1",
                value: ""
              },
              {
                label: "图像2",
                name: "img2",
                value: ""
              }
            ]
          }
        },
        {
          label: "富文本",
          name: "text",
          value: "",
          component: "editor",
        },
      ]
    }

    const form = {
      name: "Activity name",
      checkbox: {
        option1: true
      },
      checkboxGroup: ["option1"],
      select: ["1"],
      select2: "1",
      cascader: ['resource','docs'],
      tableselect: {
        user: "何敏",
        id: "360000197302144442"
      },
      text: "<p><span style=\"font-size: 28px;\">Editor</span></p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Name</td>\n<td style=\"width: 47.4544%;\">SCUI</td>\n</tr>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Describe</td>\n<td style=\"width: 47.4544%;\">Super color UI Admin</td>\n</tr>\n</tbody>\n</table>"
    }

    setTimeout(()=>{
      this.config = config
    },500)

    this.loading = true
    setTimeout(()=>{
      this.form = form
      this.loading = false
    },100)
  },
  methods: {
    setName(){
      this.form.name = "New Title"
    },
    setConfig(){
      this.config.formItems[2].span = this.config.formItems[2].span==24?12:24
      this.config.formItems[3].span = this.config.formItems[3].span==24?12:24
    },
    save(){
      this.$refs.formref.validate((valid, obj) => {
        if (valid) {
          console.log(this.form)
          alert('submit!')
        }else{
          this.$refs.formref.scrollToField(Object.keys(obj)[0])
          return false
        }
      })
    },
    reset(){
      this.$refs.formref.resetFields()
    }
  }
}
</script>

<style>
</style>
